import { Meta } from '@storybook/blocks';
import YouTubeVideoPlayer from '@/components/YouTubeVideoPlayer';
import * as DismissibleStories from '../stories/Dismissible.stories';

<Meta of={DismissibleStories} />

# Dismissible

A widget that can be dismissed by dragging in the indicated direction.

<YouTubeVideoPlayer videoId="iEMgjrfuc58" />

## Example

```dart liveslice=Dismissible mockup=iPhone7
final items = List<String>.generate(3, (i) => "Item ${i + 1}");

@override
Widget build(BuildContext context) {
  final title = 'Dismissing Items';

  return MaterialApp(
    title: title,
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index) {
          final item = items[index];

          return Dismissible(
            // Each Dismissible must contain a Key. Keys allow Flutter to
            // uniquely identify widgets.
            key: Key(item),
            // Provide a function that tells the app
            // what to do after an item has been swiped away.
            onDismissed: (direction) {
              // Remove the item from the data source.
              setState(() {
                items.removeAt(index);
              });

              // Then show a snackbar.
              Scaffold.of(context)
                  .showSnackBar(SnackBar(content: Text("$item dismissed")));
            },
            // Show a red background as the item is swiped away.
            background: Container(color: Colors.red),
            child: ListTile(title: Text('$item')),
          );
        },
      ),
    ),
  );
}
```

## Related Links

- https://api.flutter.dev/flutter/widgets/Dismissible-class.html
- https://flutter.dev/docs/cookbook/gestures/dismissible
- https://youtu.be/iEMgjrfuc58
